<!--
1. 路由的概念
    1. 后端路由：URL 地址对应服务器上的资源
    2. 前端路由：通过hash(#号) 来进行页面内的跳转。
2. 路由的基本使用
    1. 引入vue-router.js
    2. 创建VueRouter对象
    3. 将VueRouter对象添加到vm实例中
    4. 在页面中添加 router-view 容器
3. 路由匹配规则
    1. 每个路由规则，都是一个对象，对象上必须有两个属性
        1. 属性1 path：表示监听哪个路由链接地址
        2. 属性2 component：表示如果路由是前面匹配到的path，
            则展示component属性对应的哪个组件，值是组件对象
4. router-link 标签可以达到 a 标签的效果，用于页内跳转。
5. 默认显示一个页面
    1. {path:'/',component:login},
    2. redirect: {path:'/',redirect:'/login'},
6. 高亮设置
    1. router-link-active
    2. 修改默认的css样式的类名
7. 给前端路由添加动画
-->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <style>
        /*.router-link-active{*/
        /*    color: red;*/
        /*    font-weight: 800;*/
        /*    font-style: italic;*/
        /*    font-size: 80px;*/
        /*    background-color: pink;*/
        /*}*/
        .myActive{
            color: red;
        }
        .v-enter, .v-leave-to{
            opacity: 0;
            transform: translateX(140px);
        }

        .v-enter-active, .v-leave-active{
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="#/login">登录</a>
        <a href="#/register">注册</a>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
    <script>
        var login={
            template:'<h1>login组件</h1>'
        };
        var register={
            template: '<h1>register组件</h1>'
        };
        var routerObj=new VueRouter({
            routes:[
                // {path:'/',component:login},
                {path:'/',redirect:'/login'},
                {path:'/login',component:login},
                {path:'/register',component: register}
            ],
            linkActiveClass:'myActive'
        });
        var vm=new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            router:routerObj
        })
    </script>

</body>
</html>